<template>
    <div class="main">
        <div class="bg">
            <div style="width: 100%; height: 40px">
                <mt-header fixed class="header" title="目录">
                    <router-link to="/" slot="left">
                        <mt-button icon="back">主页</mt-button>
                    </router-link>
                </mt-header>
            </div>
            <div class="sudoku_row">
                <div class="sudoku_item" :key="img.id" v-for="(img) in imgs_vertical">
                    <div class="border animate__animated animate__flipInY">
                        <div :class="img.className" @click="goTo(img.pdf)">
                        </div>
                    </div>
                </div>
            </div>
            <div class="sudoku_row">
                <div class="sudoku_item" style="width: 100%;" :key="img.id" v-for="(img) in imgs_horizontal">
                    <div class="border_b animate__animated animate__flipInY">
                        <div :class="img.className" @click="goTo(img.pdf)"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Hatalogue",
        data() {
            return {
                imgs_vertical: [
                    {
                        id: 2,
                        className: 'img-c',
                        pdf: 'c'
                    },
                    {
                        id: 3,
                        className: 'img-d',
                        pdf: 'd'
                    },
                    {
                        id: 1,
                        className: 'img-b',
                        pdf: 'b'
                    },
                    {
                        id: 0,
                        className: 'img-a',
                        pdf: 'a'
                    },
                    {
                        id: 6,
                        className: 'img-g',
                        pdf: 'g'
                    },
                    {
                        id: 7,
                        className: 'img-h',
                        pdf: 'h'
                    },

                    {
                        id: 4,
                        className: 'img-e',
                        pdf: 'e'
                    },
                    {
                        id: 5,
                        className: 'img-f',
                        pdf: 'f'
                    },
                ],
                imgs_horizontal: [
                    {
                        id: 10,
                        className: 'img-k',
                        pdf: 'k'
                    },
                    {
                        id: 4,
                        className: 'img-i',
                        pdf: 'i'
                    },
                ],
            }
        },
        methods: {
            goTo(num) {
                this.$router.push({
                    name:"PdfView",
                    //这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取)
                    query:{pdfId: num}
                })
            }
        }
    }
</script>

<style scoped>
.header {
    background-color: #182ead;
    box-shadow: 2px 2px 1px #fff
}
.bg {
    background-image: url("../statics/img/bg.jpg");
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 100%;
    background-color: #111f76;
}
.main {
    height: 100%;
}
.border {
    width: 166px;
    height: 234px;
    /*border: 1px solid #474e4f;*/
    box-shadow:2px 2px 2px #fff;
}
.border_b {
    width: 280px;
    height: 194px;
    /*border: 1px solid #474e4f;*/
    box-shadow:2px 2px 2px #fff;
}
.img-a {
    background-image: url("../statics/img/a.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-b {
    background-image: url("../statics/img/b.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-c {
    background-image: url("../statics/img/c.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-d {
    background-image: url("../statics/img/d.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-e {
    background-image: url("../statics/img/e.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-f {
    background-image: url("../statics/img/f.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-g {
    background-image: url("../statics/img/g.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-h {
    background-image: url("../statics/img/h.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-i {
    background-image: url("../statics/img/i.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-j {
    background-image: url("../statics/img/j.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-k {
    background-image: url("../statics/img/k.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sudoku_row{
    display: flex;
    align-items: center;
    width:100%;
    flex-wrap: wrap;
}
.sudoku_item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:50%;
    padding-top: 15px;
    padding-bottom: 20px;
}
.animate__animated {
    animation-duration: 2s;         //动画持续时间
    animation-delay: 2s !important;              //动画延迟时间
    animation-iteration-count: 2 !important;
}
</style>
